<template>
  <svg class="v-icon" :style="{ width, height }">
    <use :xlink:href="iconName" :style="{ color }" />
  </svg>
</template>

<script setup>

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  width: {
    type: String,
    default: '2rem'
  },
  height: {
    type: String,
    default: '2rem'
  },
  color: {
    type: String,
    default: ''
  }
})

const cache = reactive({})

const { name, width, height, color } = toRefs(props)

const iconName = (() => {
  if (cache[name.value]) {
    return cache[name.value]
  }

  const iconUrl = `#icon-${name.value}`
  cache[name.value] = iconUrl

  return iconUrl
})()

onUnmounted(() => {
  for (const name in cache) {
    URL.revokeObjectURL(cache[name])
  }
})
</script>

<style scoped>
.v-icon {
  width: 2rem;
  height: 2rem;
  vertical-align: -0.15em;
  fill: currentColor;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}
</style>
